<template>
  <div class="order-detail-page" v-if="order">
    <!-- 操作栏 -->
    <DetailAction :order="order" />
    <!-- 步骤条 组件xtx-steps.vue-->
    <XtxSteps :active='order.orderState===6?1:order.orderState' >
      <XtxStepsItem title="提交订单" :desc="order.createTime"  />
      <XtxStepsItem title="付款成功" :desc="order.payTime"  />
      <XtxStepsItem title="商品发货" :desc="order.consignTime"  />
      <XtxStepsItem title="确认收货" :desc="order.endTime"  />
      <XtxStepsItem title="订单完成" :desc="order.evaluationTime"  />
    </XtxSteps>
    <!-- 物流栏 -->
    <Suspense >
        <template #default >
          <DetailLogistics v-if="[3,4,5].includes(order.orderState)" :order='order' />
        </template>
        <template #fallback >
          <div class="loading">loading...</div>
        </template>
    </Suspense>
    <!-- 订单商品信息 -->
    <DetailInfo v-model='order' />
  </div>
</template>
<script>
import { ref, provide } from "vue";
import { findOrderDetail } from "@/api/order";
import { useRoute } from "vue-router";
import DetailAction from "./components/detail-action.vue";
import DetailLogistics from './components/detail-logistics.vue'
import DetailInfo from './components/detail-info.vue'
export default {
  name: "OrderDetailPage",
  components: { DetailAction, DetailLogistics, DetailInfo },
  setup(props) {
    const route = useRoute();
    const order = ref(null);
    findOrderDetail(route.params.id).then((res) => {
      order.value = res.result;
    });
    // 给后代组件 更新订单的方法
    // provide('update-order', findOrderDetail)

    return { order };
  },
};
</script>
<style scoped lang="less">
.order-detail-page {
  background: #fff;
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
</style>